
<!--<template>
  <div class="relative">
    <div class="vx-navbar-wrapper">
      <vs-navbar class="vx-navbar navbar-custom" :color="navbarColor" :class="classObj">
        &lt;!&ndash; SM - OPEN SIDEBAR BUTTON &ndash;&gt;
        &lt;!&ndash; <feather-icon
          class="sm:inline-flex xl:hidden cursor-pointer mr-1"
          icon="MenuIcon"
          @click.stop="showSidebar"
        ></feather-icon> &ndash;&gt;
        &lt;!&ndash; <img class='logo-image' src="../../assets/images/logo/logo.png" alt=""> &ndash;&gt;
        <span class="logo_title">柳州市城市桥梁健康监测系统</span>
        <template v-if="breakpoint != 'md'">
          &lt;!&ndash; STARRED PAGES MORE &ndash;&gt;
          <div class="vx-navbar__starred-pages&#45;&#45;more-dropdown" v-if="starredPagesMore.length">
            <vs-dropdown vs-custom-content vs-trigger-click>
              <feather-icon icon="DiscIcon" svgClasses="h-4 w-4" class="cursor-pointer p-2"></feather-icon>
              <vs-dropdown-menu>
                <ul class="vx-navbar__starred-pages-more&#45;&#45;list">
                  <draggable v-model="starredPagesMore" :group="{ name: 'pinList' }" class="cursor-move">
                    <li class="starred-page&#45;&#45;more flex items-center cursor-pointer" v-for="page in starredPagesMore" :key="page.url" @click="$router.push(page.url)">
                      <feather-icon svgClasses="h-5 w-5" class="ml-2 mr-1" :icon="page.labelIcon"></feather-icon>
                      <span class="px-2 pt-2 pb-1">{{ page.label }}</span>
                    </li>
                  </draggable>
                </ul>
              </vs-dropdown-menu>
            </vs-dropdown>
          </div>

          &lt;!&ndash; <div class="bookmark-container">
            <feather-icon
            v-if="!this.$store.state.reduceButton"
              icon="DiscIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

            <feather-icon
            v-if="this.$store.state.reduceButton"
              icon="CircleIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

          </div> &ndash;&gt;

          &lt;!&ndash; navTab切换 &ndash;&gt;
          &lt;!&ndash; <div class="bookmark-container">
            <feather-icon
              icon="LayersIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="toggleCacheRoutehandler"
            />
          </div>
          <div
            v-if="isCacheRouteShow"
            class="navbar-nav-tab-wrapper w-full flex items-center px-4"
            style="height:26px;position:absolute;top:60%"
          >
            <nav-tab></nav-tab>
          </div> &ndash;&gt;
        </template>
        <vs-spacer></vs-spacer>

        &lt;!&ndash; CART DROPDOWN &ndash;&gt;
        &lt;!&ndash; <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon
            icon="ShoppingCartIcon"
            class="cursor-pointer ml-4 mr-6 mt-1"
            :badge="cartItems.length"
          ></feather-icon>
          <vs-dropdown-menu
            class="cart-dropdown vx-navbar-dropdown"
            :class="{ 'dropdown-custom': cartItems.length }"
          >
            <template v-if="cartItems.length">
              <div
                class="notification-header text-center p-5 bg-primary text-white"
              >
                <h3 class="text-white">
                  {{ cartItems.length }} Item<span v-show="cartItems.length > 1"
                    >s</span
                  >
                </h3>
                <p class="opacity-75">In Your Cart</p>
              </div>

              <VuePerfectScrollbar
                ref="mainSidebarPs"
                class="scroll-area&#45;&#45;cart-items-dropdowm p-0 mb-10"
                :settings="settings"
              >
                <ul class="bordered-items">
                  <li
                    v-for="item in cartItems"
                    :key="item.objectID"
                    class="vx-row no-gutter cart-item cursor-pointer"
                  >
                    <div
                      class="vx-col w-1/5 item-img-container bg-white flex items-center justify-center"
                    >
                      <img
                        :src="item.image"
                        alt="item"
                        class="cart-dropdown-item-img p-4"
                      />
                    </div>

                    <div
                      class="vx-col w-4/5 pr-4 pl-2 py-4 flex flex-col justify-center"
                    >
                      <span
                        class="font-medium block cart-item-title truncate"
                        >{{ item.name }}</span
                      >
                      <small class="truncate mb-2">{{
                        item.description
                      }}</small>
                      <div class="flex items-center justify-between">
                        <span class="text-sm font-medium"
                          >{{ item.quantity }} <small>x</small> ${{
                            item.price
                          }}</span
                        >
                        <feather-icon
                          icon="XIcon"
                          svgClasses="h-4 w-4 cursor-pointer text-danger"
                          class="hover:text-danger"
                          @click.stop="removeItemFromCart(item)"
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </VuePerfectScrollbar>
              <div
                class=" checkout-footer fixed bottom-0 rounded-b-lg text-primary font-semibold w-full p-2 text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
                @click="$router.push('/apps/eCommerce/checkout')"
              >
                <span class="flex items-center justify-center">
                  <feather-icon
                    icon="ShoppingCartIcon"
                    svgClasses="h-4 w-4"
                  ></feather-icon>
                  <span class="ml-2">Checkout</span>
                </span>
              </div>
            </template>

            <template v-else>
              <p class="p-4">Your Cart Is Empty.</p>
            </template>
          </vs-dropdown-menu>
        </vs-dropdown> &ndash;&gt;

        &lt;!&ndash; NOTIFICATIONS &ndash;&gt;
        <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon icon="BellIcon" class="cursor-pointer mt-1 sm:mr-6 mr-2" :badge="warningList.length"></feather-icon>
          <vs-dropdown-menu class="notification-dropdown dropdown-custom vx-navbar-dropdown">
            <div class="notification-top text-center p-5 bg-primary text-white">
              <h3 class="text-white">{{ warningList.length }} 条报警</h3>
            </div>

            <VuePerfectScrollbar ref="mainSidebarPs" class="scroll-area&#45;&#45;nofications-dropdown p-0 mb-10" :settings="settings">
              <ul class="bordered-items">
                <li v-for="ntf in warningList" :key="ntf.index" class="flex justify-between px-4 py-4 notification cursor-pointer">
                  <div class="flex items-start">
                    <feather-icon :icon="ntf.icon" :svgClasses="[`text-${ntf.category}`, 'stroke-current mr-1 h-6 w-6']"></feather-icon>
                    <div class="mx-2">
                      <span class="font-medium block notification-title" :class="[`text-${ntf.category}`]">{{ ntf.stationName }}</span>
                      <small>{{ ntf.alarmDate }}</small>
                    </div>
                  </div>
                  <small class="mt-1 whitespace-no-wrap">{{ ntf.code }}</small>
                </li>
              </ul>
            </VuePerfectScrollbar>
            <div
              @click="gotoWarning()"
              class="checkout-footer fixed bottom-0 rounded-b-lg text-primary w-full p-2 font-semibold text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
            >
              <span>查看所有</span>
            </div>
          </vs-dropdown-menu>
        </vs-dropdown>

        &lt;!&ndash; 视图切换 &ndash;&gt;
        <div class="view-container">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ handleSelect }}
              <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, key) in viewContent" :key="key" :command="item.userViewId + ',' + item.viewName">{{ item.viewName }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        &lt;!&ndash; USER META 用户信息 &ndash;&gt;
        <div class="the-navbar__user-meta flex items-center">
          <div class="text-right leading-tight hidden sm:block">
            <p class="font-semibold">{{ user_displayName }}</p>
          </div>
          <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
            <div class="con-img ml-3">
              <img v-if="iconId" key="onlineImg" :src="iconUrl" alt="user-img" width="40" height="40" class="rounded-full shadow-md cursor-pointer block" />
              <img v-else key="localImg" :src="require(`@/assets/images/portrait/small/${activeUserImg}`)" alt="user-img" width="40" height="40" class="rounded-full shadow-md cursor-pointer block" />
            </div>
            <vs-dropdown-menu class="vx-navbar-dropdown">
              <ul style="min-width: 9rem">
                &lt;!&ndash; <li
                          class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white"
                          @click="$router.push('/pages/profile')"
                        >
                          <feather-icon icon="UserIcon" svgClasses="w-4 h-4" />
                          <span class="ml-2">个人信息</span>
                        </li>
                        <vs-divider class="m-1"></vs-divider> &ndash;&gt;

                <li class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white" @click="logout">
                  <feather-icon icon="LogOutIcon" svgClasses="w-4 h-4" />
                  <span class="ml-2">退出</span>
                </li>
              </ul>
            </vs-dropdown-menu>
          </vs-dropdown>
        </div>
      </vs-navbar>
    </div>
  </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import draggable from 'vuedraggable'
import navTab from './navTab'
import base from '@/api/base' // 导入接口域名列表
export default {
  name: 'the-navbar',
  props: {
    navbarColor: {
      type: String,
      default: '#fff',
    },
    viewContent: {},
  },
  mounted() {
    let icon = JSON.parse(localStorage.getItem('userInfo')).icon
    // console.log(icon.length, "8888888888888888888");

    // if (icon.length > 0) {
    //   this.iconId = icon[0].fileId;
    //   this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`;
    // }

    if (JSON.parse(icon).length > 0) {
      this.iconId = JSON.parse(icon)[0].fileId
      this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`
    }

    // 获取事件类型
    // this.getEventType();
  },
  created() {
    // this.clickOPtions();
    // this.getWarningType();
    // // 获取当天时间
    // let dateTime = new Date();
    // this.startTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "00:00:00";
    // this.endTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "23:59:59";

    // console.log("滴滴滴弟弟第一地一地",this.startTime,this.endTime)
    if (localStorage.getItem('viewIndex')) this.handleSelect = this.viewContent[Number(localStorage.getItem('viewIndex'))].viewName
    else this.handleSelect = this.viewContent[0].viewName

    // 获取十条告警列表
    this.getWarning()
  },
  data() {
    return {
      warningList: [],
      navbarSearchAndPinList: this.$store.state.navbarSearchAndPinList,
      searchQuery: '',
      showFullSearch: false,
      iconId: '',
      iconUrl: '',
      unreadNotifications: [
        {
          index: 0,
          title: 'New Message',
          msg: 'Are your going to meet me tonight?',
          icon: 'MessageSquareIcon',
          time: 'Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)',
          category: 'primary',
        },
        {
          index: 1,
          title: 'New Order Recieved',
          msg: 'You got new order of goods.',
          icon: 'PackageIcon',
          time: 'Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)',
          category: 'success',
        },
        {
          index: 2,
          title: 'Server Limit Reached!',
          msg: 'Server have 99% CPU usage.',
          icon: 'AlertOctagonIcon',
          time: 'Thu Jan 31 2019 07:45:23 GMT+0000 (GMT)',
          category: 'danger',
        },
      ],
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 60,
        wheelSpeed: 0.6,
      },
      autoFocusSearch: false,
      showBookmarkPagesDropdown: false,
      isCacheRouteShow: false,
      // 选择的视图
      handleSelect: '',
    }
  },
  watch: {
    $route() {
      if (this.showBookmarkPagesDropdown) this.showBookmarkPagesDropdown = false
    },
    '$store.state.cacheRoute': function (newVal) {
      if (newVal.length == 0) {
        this.toggleCacheRoutehandler()
      }
    },
    viewContent: {
      deep: true,
      immediate: true,
      handler: function () {
        console.log(this.viewContent, '222222222222222222222222222')
        // this.handleSelect = this.viewContent[1].name;
      },
    },
  },
  computed: {
    // HELPER
    sidebarWidth() {
      return this.$store.state.sidebarWidth
    },
    breakpoint() {
      return this.$store.state.breakpoint
    },

    // NAVBAR STYLE
    classObj() {
      if (this.sidebarWidth == 'default') return 'navbar-default'
      else if (this.sidebarWidth == 'reduced') return 'navbar-reduced'
      else if (this.sidebarWidth) return 'navbar-full'
    },

    // I18N
    getCurrentLocaleData() {
      const locale = this.$i18n.locale
      if (locale == 'en') return { flag: 'us', lang: 'English' }
      else if (locale == 'pt') return { flag: 'br', lang: 'Portuguese' }
      else if (locale == 'fr') return { flag: 'fr', lang: 'French' }
      else if (locale == 'de') return { flag: 'de', lang: 'German' }
    },

    // BOOKMARK & SEARCH
    data() {
      return this.$store.state.navbarSearchAndPinList
    },
    starredPages() {
      return this.$store.state.starredPages
    },
    starredPagesLimited: {
      get() {
        return this.starredPages.slice(0, 10)
      },
      set(list) {
        this.$store.dispatch('arrangeStarredPagesLimited', list)
      },
    },
    starredPagesMore: {
      get() {
        return this.starredPages.slice(10)
      },
      set(list) {
        this.$store.dispatch('arrangeStarredPagesMore', list)
      },
    },

    // CART DROPDOWN
    cartItems() {
      return this.$store.state.eCommerce.cartItems.slice().reverse()
    },

    // PROFILE
    user_displayName() {
      // if (localStorage.getItem("viewIndex"))
      //   this.handleSelect = this.viewContent[
      //     Number(localStorage.getItem("viewIndex"))
      //   ].viewName;
      // else this.handleSelect = this.viewContent[0].viewName;

      return JSON.parse(localStorage.getItem('userInfo')).realname
    },
    activeUserImg() {
      return JSON.parse(localStorage.getItem('userInfo')).photoURL || this.$store.state.AppActiveUser.img
      // return this.$store.state.AppActiveUser.img;
    },
  },
  methods: {
    gotoWarning() {
      this.$router.push('/healthMonitor/WarningList')
      // alert(123)
      // this.$router.push("/healthMonitor/WarningList");
    },
    handleCommand(command) {
      let data = command.split(',')
      this.handleSelect = data[1]
      console.log(data, '2222222222')
      this.$parent.getMenu(data[0])
    },
    reducedSidebarHandler() {
      let _is_sidebar_collapse = this.$store.state.reduceButton
      this.$store.commit('TOGGLE_REDUCE_BUTTON', !_is_sidebar_collapse)
    },
    toggleCacheRoutehandler() {
      if (this.$store.state.cacheRoute.length > 0) {
        this.isCacheRouteShow = !this.isCacheRouteShow
        this.isCacheRouteShow ? (this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '2.5rem') : (this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '0.8rem')
      } else {
        this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '0.8rem'
        this.isCacheRouteShow = false
      }
    },
    updateLocale(locale) {
      this.$i18n.locale = locale
    },
    showSidebar() {
      this.$store.commit('TOGGLE_IS_SIDEBAR_ACTIVE', true)
    },
    selected(item) {
      this.$router.push(item.url)
      this.showFullSearch = false
    },
    actionClicked(item) {
      // e.stopPropogation();
      this.$store.dispatch('updateStarredPage', {
        index: item.index,
        val: !item.highlightAction,
      })
    },
    showNavbarSearch() {
      this.showFullSearch = true
    },
    showSearchbar() {
      this.showFullSearch = true
    },
    elapsedTime(startTime) {
      let x = new Date(startTime)
      let now = new Date()
      var timeDiff = now - x
      timeDiff /= 1000

      var seconds = Math.round(timeDiff)
      timeDiff = Math.floor(timeDiff / 60)

      var minutes = Math.round(timeDiff % 60)
      timeDiff = Math.floor(timeDiff / 60)

      var hours = Math.round(timeDiff % 24)
      timeDiff = Math.floor(timeDiff / 24)

      var days = Math.round(timeDiff % 365)
      timeDiff = Math.floor(timeDiff / 365)

      var years = timeDiff

      if (years > 0) {
        return years + (years > 1 ? ' Years ' : ' Year ') + 'ago'
      } else if (days > 0) {
        return days + (days > 1 ? ' Days ' : ' Day ') + 'ago'
      } else if (hours > 0) {
        return hours + (hours > 1 ? ' Hrs ' : ' Hour ') + 'ago'
      } else if (minutes > 0) {
        return minutes + (minutes > 1 ? ' Mins ' : ' Min ') + 'ago'
      } else if (seconds > 0) {
        return seconds + (seconds > 1 ? `${seconds} sec ago` : 'just now')
      }

      return 'Just Now'
    },
    logout() {
      // this.$router.push("/pages/login").catch(() => {});
      this.$api.login.logOut().then((res) => {
        this.$api.login.logOutDate().then((res) => {
          console.log(res)
          if (res.data.success) {
            this.$router.push('/pages/login')
            localStorage.removeItem('userInfo')
            localStorage.removeItem('token')
            localStorage.clear()
          }
        })
        // console.log("退出登陆", res);
      })
      // .catch(() => {
      //   this.$router.push("/pages/login");
      //   localStorage.removeItem("userInfo");
      //   localStorage.removeItem("token");
      //   localStorage.clear();
      // });
    },
    outside: function () {
      this.showBookmarkPagesDropdown = false
    },

    // CART DROPDOWN
    removeItemFromCart(item) {
      this.$store.dispatch('eCommerce/toggleItemInCart', item)
    },

    // 获取权限下的病害列表
    getWarning() {
      this.$api.mearsuringPointSetting.getWarnignList().then((res) => {
        console.log('10条告警列表', res.data.data)
        this.warningList = res.data.data
      })
    },
  },
  directives: {
    'click-outside': {
      bind: function (el, binding) {
        const bubble = binding.modifiers.bubble
        const handler = (e) => {
          if (bubble || (!el.contains(e.target) && el !== e.target)) {
            binding.value(e)
          }
        }
        el.__vueClickOutside__ = handler
        document.addEventListener('click', handler)
      },

      unbind: function (el) {
        document.removeEventListener('click', el.__vueClickOutside__)
        el.__vueClickOutside__ = null
      },
    },
  },
  components: {
    VuePerfectScrollbar,
    draggable,
    navTab,
  },
}
</script>
<style>
.nav-tab-dropdown-menu {
  position: absolute;
  left: 469px !important;
  z-index: 52000;
  transform: translate(-35.5%);
}
.vs-dropdown&#45;&#45;menu&#45;&#45;after {
  position: absolute;
  /* left: 70px; */
}
.dropdown-custom .vs-dropdown&#45;&#45;menu&#45;&#45;after {
  background: rgba(var(&#45;&#45;vs-primary), 1) !important;
}
.logo_title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 10px;
}
.view-container {
  margin-right: 20px;
}
</style>-->
=======
<!-- =========================================================================================
	File Name: TheNavbar.vue
	Description: Navbar component
	Component Name: TheNavbar
========================================================================================== -->

<!--<template>
  <div class="relative">
    <div class="vx-navbar-wrapper">
      <vs-navbar class="vx-navbar navbar-custom" :color="navbarColor" :class="classObj">
        &lt;!&ndash; SM - OPEN SIDEBAR BUTTON &ndash;&gt;
        &lt;!&ndash; <feather-icon
          class="sm:inline-flex xl:hidden cursor-pointer mr-1"
          icon="MenuIcon"
          @click.stop="showSidebar"
        ></feather-icon> &ndash;&gt;
        <img class="logo-image" src="../../assets/images/logo/logo.png" alt="" />
        <span class="logo_title">柳州市城市桥梁健康监测系统</span>
        <template v-if="breakpoint != 'md'">
          &lt;!&ndash; STARRED PAGES MORE &ndash;&gt;
          <div class="vx-navbar__starred-pages&#45;&#45;more-dropdown" v-if="starredPagesMore.length">
            <vs-dropdown vs-custom-content vs-trigger-click>
              <feather-icon icon="DiscIcon" svgClasses="h-4 w-4" class="cursor-pointer p-2"></feather-icon>
              <vs-dropdown-menu>
                <ul class="vx-navbar__starred-pages-more&#45;&#45;list">
                  <draggable v-model="starredPagesMore" :group="{ name: 'pinList' }" class="cursor-move">
                    <li class="starred-page&#45;&#45;more flex items-center cursor-pointer" v-for="page in starredPagesMore" :key="page.url" @click="$router.push(page.url)">
                      <feather-icon svgClasses="h-5 w-5" class="ml-2 mr-1" :icon="page.labelIcon"></feather-icon>
                      <span class="px-2 pt-2 pb-1">{{ page.label }}</span>
                    </li>
                  </draggable>
                </ul>
              </vs-dropdown-menu>
            </vs-dropdown>
          </div>

          &lt;!&ndash; <div class="bookmark-container">
            <feather-icon
            v-if="!this.$store.state.reduceButton"
              icon="DiscIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

            <feather-icon
            v-if="this.$store.state.reduceButton"
              icon="CircleIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

          </div> &ndash;&gt;

          &lt;!&ndash; navTab切换 &ndash;&gt;
          &lt;!&ndash; <div class="bookmark-container">
            <feather-icon
              icon="LayersIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="toggleCacheRoutehandler"
            />
          </div>
          <div
            v-if="isCacheRouteShow"
            class="navbar-nav-tab-wrapper w-full flex items-center px-4"
            style="height:26px;position:absolute;top:60%"
          >
            <nav-tab></nav-tab>
          </div> &ndash;&gt;
        </template>
        <vs-spacer></vs-spacer>

        &lt;!&ndash; CART DROPDOWN &ndash;&gt;
        &lt;!&ndash; <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon
            icon="ShoppingCartIcon"
            class="cursor-pointer ml-4 mr-6 mt-1"
            :badge="cartItems.length"
          ></feather-icon>
          <vs-dropdown-menu
            class="cart-dropdown vx-navbar-dropdown"
            :class="{ 'dropdown-custom': cartItems.length }"
          >
            <template v-if="cartItems.length">
              <div
                class="notification-header text-center p-5 bg-primary text-white"
              >
                <h3 class="text-white">
                  {{ cartItems.length }} Item<span v-show="cartItems.length > 1"
                    >s</span
                  >
                </h3>
                <p class="opacity-75">In Your Cart</p>
              </div>

              <VuePerfectScrollbar
                ref="mainSidebarPs"
                class="scroll-area&#45;&#45;cart-items-dropdowm p-0 mb-10"
                :settings="settings"
              >
                <ul class="bordered-items">
                  <li
                    v-for="item in cartItems"
                    :key="item.objectID"
                    class="vx-row no-gutter cart-item cursor-pointer"
                  >
                    <div
                      class="vx-col w-1/5 item-img-container bg-white flex items-center justify-center"
                    >
                      <img
                        :src="item.image"
                        alt="item"
                        class="cart-dropdown-item-img p-4"
                      />
                    </div>

                    <div
                      class="vx-col w-4/5 pr-4 pl-2 py-4 flex flex-col justify-center"
                    >
                      <span
                        class="font-medium block cart-item-title truncate"
                        >{{ item.name }}</span
                      >
                      <small class="truncate mb-2">{{
                        item.description
                      }}</small>
                      <div class="flex items-center justify-between">
                        <span class="text-sm font-medium"
                          >{{ item.quantity }} <small>x</small> ${{
                            item.price
                          }}</span
                        >
                        <feather-icon
                          icon="XIcon"
                          svgClasses="h-4 w-4 cursor-pointer text-danger"
                          class="hover:text-danger"
                          @click.stop="removeItemFromCart(item)"
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </VuePerfectScrollbar>
              <div
                class=" checkout-footer fixed bottom-0 rounded-b-lg text-primary font-semibold w-full p-2 text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
                @click="$router.push('/apps/eCommerce/checkout')"
              >
                <span class="flex items-center justify-center">
                  <feather-icon
                    icon="ShoppingCartIcon"
                    svgClasses="h-4 w-4"
                  ></feather-icon>
                  <span class="ml-2">Checkout</span>
                </span>
              </div>
            </template>

            <template v-else>
              <p class="p-4">Your Cart Is Empty.</p>
            </template>
          </vs-dropdown-menu>
        </vs-dropdown> &ndash;&gt;

        &lt;!&ndash; NOTIFICATIONS &ndash;&gt;
        <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon icon="BellIcon" class="cursor-pointer mt-1 sm:mr-6 mr-2" :badge="warningList.length"></feather-icon>
          <vs-dropdown-menu class="notification-dropdown dropdown-custom vx-navbar-dropdown">
            <div class="notification-top text-center p-5 bg-primary text-white">
              <h3 class="text-white">{{ warningList.length }} 条报警</h3>
            </div>

            <VuePerfectScrollbar ref="mainSidebarPs" class="scroll-area&#45;&#45;nofications-dropdown p-0 mb-10" :settings="settings">
              <ul class="bordered-items">
                <li v-for="ntf in warningList" :key="ntf.index" class="flex justify-between px-4 py-4 notification cursor-pointer">
                  <div class="flex items-start">
                    <feather-icon :icon="ntf.icon" :svgClasses="[`text-${ntf.category}`, 'stroke-current mr-1 h-6 w-6']"></feather-icon>
                    <div class="mx-2">
                      <span class="font-medium block notification-title" :class="[`text-${ntf.category}`]">{{ ntf.stationName }}</span>
                      <small>{{ ntf.alarmDate }}</small>
                    </div>
                  </div>
                  <small class="mt-1 whitespace-no-wrap">{{ ntf.code }}</small>
                </li>
              </ul>
            </VuePerfectScrollbar>
            <div
              @click="gotoWarning()"
              class="checkout-footer fixed bottom-0 rounded-b-lg text-primary w-full p-2 font-semibold text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
            >
              <span>查看所有</span>
            </div>
          </vs-dropdown-menu>
        </vs-dropdown>

        &lt;!&ndash; 视图切换 &ndash;&gt;
        <div class="view-container">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ handleSelect }}
              <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item, key) in viewContent" :key="key" :command="item.userViewId + ',' + item.viewName">{{ item.viewName }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        &lt;!&ndash; USER META 用户信息 &ndash;&gt;
        <div class="the-navbar__user-meta flex items-center">
          <div class="text-right leading-tight hidden sm:block">
            <p class="font-semibold">{{ user_displayName }}</p>
          </div>
          <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
            <div class="con-img ml-3">
              <img v-if="iconId" key="onlineImg" :src="iconUrl" alt="user-img" width="40" height="40" class="rounded-full shadow-md cursor-pointer block" />
              <img v-else key="localImg" :src="require(`@/assets/images/portrait/small/${activeUserImg}`)" alt="user-img" width="40" height="40" class="rounded-full shadow-md cursor-pointer block" />
            </div>
            <vs-dropdown-menu class="vx-navbar-dropdown" v-show="passwordFlage">
              <ul style="min-width: 9rem">
                &lt;!&ndash; <li
                          class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white"
                          @click="$router.push('/pages/profile')"
                        >
                          <feather-icon icon="UserIcon" svgClasses="w-4 h-4" />
                          <span class="ml-2">个人信息</span>
                        </li>
                        <vs-divider class="m-1"></vs-divider> &ndash;&gt;

                <li class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white" @click="logout">
                  <feather-icon icon="LogOutIcon" svgClasses="w-4 h-4" />
                  <span class="ml-2">退出</span>
                </li>
                <li class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white" @click="changePassword">
                  <feather-icon icon="LockIcon" svgClasses="w-4 h-4" />
                  <span class="ml-2">修改密码</span>
                </li>
              </ul>
            </vs-dropdown-menu>
          </vs-dropdown>
        </div>
      </vs-navbar>
    </div>
    &lt;!&ndash; 新增弹框 &ndash;&gt;
    <vx-popup :title="PasswordTitle" width="500px" @close="closeFormSubmitData" :active.sync="cardDialogVisible" @confirmPopup="submit" @cancelPopup="cancelFormSubmitData">
      <el-form :model="addRuleForm" :rules="addRules" ref="addRefRuleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码" prop="original">
          <el-input show-password v-model="addRuleForm.original" placeholder="填写原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input show-password v-model="addRuleForm.newPassword" placeholder="填写新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input show-password v-model="addRuleForm.confirmPassword" placeholder="再次填写确认"></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>

<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import draggable from 'vuedraggable'
import navTab from './navTab'
import base from '@/api/base' // 导入接口域名列表
// YU 修改
import md5 from 'js-md5'
export default {
  name: 'the-navbar',
  props: {
    navbarColor: {
      type: String,
      default: '#fff',
    },
    viewContent: {},
  },
  mounted() {
    let icon = JSON.parse(localStorage.getItem('userInfo')).icon
    // console.log(icon.length, "8888888888888888888");

    // if (icon.length > 0) {
    //   this.iconId = icon[0].fileId;
    //   this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`;
    // }

    if (JSON.parse(icon).length > 0) {
      this.iconId = JSON.parse(icon)[0].fileId
      this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`
    }

    // 获取事件类型
    // this.getEventType();
  },
  created() {
    // this.clickOPtions();
    // this.getWarningType();
    // // 获取当天时间
    // let dateTime = new Date();
    // this.startTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "00:00:00";
    // this.endTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "23:59:59";

    // console.log("滴滴滴弟弟第一地一地",this.startTime,this.endTime)
    if (localStorage.getItem('viewIndex')) this.handleSelect = this.viewContent[Number(localStorage.getItem('viewIndex'))].viewName
    else this.handleSelect = this.viewContent[0].viewName

    // 获取十条告警列表
    this.getWarning()
  },
  data() {
    return {
      warningList: [],
      navbarSearchAndPinList: this.$store.state.navbarSearchAndPinList,
      searchQuery: '',
      showFullSearch: false,
      iconId: '',
      iconUrl: '',
      unreadNotifications: [
        {
          index: 0,
          title: 'New Message',
          msg: 'Are your going to meet me tonight?',
          icon: 'MessageSquareIcon',
          time: 'Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)',
          category: 'primary',
        },
        {
          index: 1,
          title: 'New Order Recieved',
          msg: 'You got new order of goods.',
          icon: 'PackageIcon',
          time: 'Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)',
          category: 'success',
        },
        {
          index: 2,
          title: 'Server Limit Reached!',
          msg: 'Server have 99% CPU usage.',
          icon: 'AlertOctagonIcon',
          time: 'Thu Jan 31 2019 07:45:23 GMT+0000 (GMT)',
          category: 'danger',
        },
      ],
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 60,
        wheelSpeed: 0.6,
      },
      autoFocusSearch: false,
      showBookmarkPagesDropdown: false,
      isCacheRouteShow: false,
      // 选择的视图
      handleSelect: '',
      // YU 修改
      PasswordTitle: '修改密码',
      cardDialogVisible: false,
      addRuleForm: {
        original: '', // 原密码
        newPassword: '', // 新密码
        confirmPassword: '', // 确认新密码
      },
      addRules: {
        original: [{ required: true, message: '请填入原密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请填入新密码', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }],
      },
      passwordFlage: true, // 用于隐藏头像下的下拉框！！
    }
  },
  watch: {
    $route(val,old) {
      if (this.showBookmarkPagesDropdown) this.showBookmarkPagesDropdown = false
      let ownInfo = JSON.parse(localStorage.getItem("ownInfo"))[0]; // 当前视图
      if(old.name == '首页'  && val) {
        this.viewContent.map(item => {
          if(item.viewName == ownInfo.name) {
            let command = item.userViewId + ',' + item.viewName
            this.handleCommand(command)
          }
        })
      }
    },
    '$store.state.cacheRoute': function (newVal) {
      if (newVal.length == 0) {
        this.toggleCacheRoutehandler()
      }
    },
    viewContent: {
      deep: true,
      immediate: true,
      handler: function () {
        console.log(this.viewContent, '222222222222222222222222222')
        // this.handleSelect = this.viewContent[1].name;
      },
    },
  },
  computed: {
    // HELPER
    sidebarWidth() {
      return this.$store.state.sidebarWidth
    },
    breakpoint() {
      return this.$store.state.breakpoint
    },

    // NAVBAR STYLE
    classObj() {
      if (this.sidebarWidth == 'default') return 'navbar-default'
      else if (this.sidebarWidth == 'reduced') return 'navbar-reduced'
      else if (this.sidebarWidth) return 'navbar-full'
    },

    // I18N
    getCurrentLocaleData() {
      const locale = this.$i18n.locale
      if (locale == 'en') return { flag: 'us', lang: 'English' }
      else if (locale == 'pt') return { flag: 'br', lang: 'Portuguese' }
      else if (locale == 'fr') return { flag: 'fr', lang: 'French' }
      else if (locale == 'de') return { flag: 'de', lang: 'German' }
    },

    // BOOKMARK & SEARCH
    data() {
      return this.$store.state.navbarSearchAndPinList
    },
    starredPages() {
      return this.$store.state.starredPages
    },
    starredPagesLimited: {
      get() {
        return this.starredPages.slice(0, 10)
      },
      set(list) {
        this.$store.dispatch('arrangeStarredPagesLimited', list)
      },
    },
    starredPagesMore: {
      get() {
        return this.starredPages.slice(10)
      },
      set(list) {
        this.$store.dispatch('arrangeStarredPagesMore', list)
      },
    },

    // CART DROPDOWN
    cartItems() {
      return this.$store.state.eCommerce.cartItems.slice().reverse()
    },

    // PROFILE
    user_displayName() {
      // if (localStorage.getItem("viewIndex"))
      //   this.handleSelect = this.viewContent[
      //     Number(localStorage.getItem("viewIndex"))
      //   ].viewName;
      // else this.handleSelect = this.viewContent[0].viewName;

      return JSON.parse(localStorage.getItem('userInfo')).realname
    },
    activeUserImg() {
      return JSON.parse(localStorage.getItem('userInfo')).photoURL || this.$store.state.AppActiveUser.img
      // return this.$store.state.AppActiveUser.img;
    },
  },
  methods: {
    gotoWarning() {
      this.$router.push('/healthMonitor/WarningList')
      // alert(123)
      // this.$router.push("/healthMonitor/WarningList");
    },
    handleCommand(command) {
      // console.log(command)
      // console.log('选中桥梁视图会怎么变化呢！！！！')
      // debugger
      let data = command.split(',')
      this.handleSelect = data[1]

      this.$parent.getMenu(data[0])
    },
    reducedSidebarHandler() {
      let _is_sidebar_collapse = this.$store.state.reduceButton
      this.$store.commit('TOGGLE_REDUCE_BUTTON', !_is_sidebar_collapse)
    },
    toggleCacheRoutehandler() {
      if (this.$store.state.cacheRoute.length > 0) {
        this.isCacheRouteShow = !this.isCacheRouteShow
        this.isCacheRouteShow ? (this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '2.5rem') : (this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '0.8rem')
      } else {
        this.$el.querySelector('.vs-navbar.vx-navbar').style.paddingBottom = '0.8rem'
        this.isCacheRouteShow = false
      }
    },
    updateLocale(locale) {
      this.$i18n.locale = locale
    },
    showSidebar() {
      this.$store.commit('TOGGLE_IS_SIDEBAR_ACTIVE', true)
    },
    selected(item) {
      this.$router.push(item.url)
      this.showFullSearch = false
    },
    actionClicked(item) {
      // e.stopPropogation();
      this.$store.dispatch('updateStarredPage', {
        index: item.index,
        val: !item.highlightAction,
      })
    },
    showNavbarSearch() {
      this.showFullSearch = true
    },
    showSearchbar() {
      this.showFullSearch = true
    },
    elapsedTime(startTime) {
      let x = new Date(startTime)
      let now = new Date()
      var timeDiff = now - x
      timeDiff /= 1000

      var seconds = Math.round(timeDiff)
      timeDiff = Math.floor(timeDiff / 60)

      var minutes = Math.round(timeDiff % 60)
      timeDiff = Math.floor(timeDiff / 60)

      var hours = Math.round(timeDiff % 24)
      timeDiff = Math.floor(timeDiff / 24)

      var days = Math.round(timeDiff % 365)
      timeDiff = Math.floor(timeDiff / 365)

      var years = timeDiff

      if (years > 0) {
        return years + (years > 1 ? ' Years ' : ' Year ') + 'ago'
      } else if (days > 0) {
        return days + (days > 1 ? ' Days ' : ' Day ') + 'ago'
      } else if (hours > 0) {
        return hours + (hours > 1 ? ' Hrs ' : ' Hour ') + 'ago'
      } else if (minutes > 0) {
        return minutes + (minutes > 1 ? ' Mins ' : ' Min ') + 'ago'
      } else if (seconds > 0) {
        return seconds + (seconds > 1 ? `${seconds} sec ago` : 'just now')
      }

      return 'Just Now'
    },
    logout() {
      // this.$router.push("/pages/login").catch(() => {});
      this.$api.login.logOut().then((res) => {
        this.$api.login.logOutDate().then((res) => {
          if (res.data.success) {
            this.$router.push('/pages/login')
            localStorage.removeItem('userInfo')
            localStorage.removeItem('token')
            localStorage.clear()
          }
        })
        // console.log("退出登陆", res);
      })
      // .catch(() => {
      //   this.$router.push("/pages/login");
      //   localStorage.removeItem("userInfo");
      //   localStorage.removeItem("token");
      //   localStorage.clear();
      // });
    },

    outside: function () {
      this.showBookmarkPagesDropdown = false
    },

    // CART DROPDOWN
    removeItemFromCart(item) {
      this.$store.dispatch('eCommerce/toggleItemInCart', item)
    },

    // 获取权限下的病害列表
    getWarning() {
      this.$api.mearsuringPointSetting.getWarnignList().then((res) => {
        console.log('10条告警列表', res.data.data)
        this.warningList = res.data.data
      })
    },
    // YU 修改如下
    changePassword() {
      console.log('修改密码')
      this.$nextTick(() => {
        this.$refs.addRefRuleForm.resetFields()
      })
      this.cardDialogVisible = true
      this.passwordFlage = false
    },
    closeFormSubmitData() {
      this.cardDialogVisible = false
      this.passwordFlage = true
    },
    submit() {
      console.log('提交按钮！！')
      this.$refs.addRefRuleForm.validate((valid) => {
        if (valid) {
          console.log('验证通过！')
          if (this.addRuleForm.newPassword == this.addRuleForm.confirmPassword) {
            let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
            let _userId = _userInfo.userid
            let userInfo = {
              newPassword: md5(this.addRuleForm.newPassword),
              oldPassword: md5(this.addRuleForm.original),
              userId: _userId,
            }
            this.$api.login
              .changePassword(userInfo)
              .then((res) => {
                if (res.data.success) {
                  this.cardDialogVisible = false
                  this.$vs.notify({
                    text: `修改成功`,
                    color: 'success',
                  })
                  this.$vs.notify({
                    text: `请重新登录`,
                    color: 'success',
                  })
                  let _this = this
                  setTimeout(() => {
                    _this.logout()
                  }, 3000)
                }
              })
              .catch((res) => {
                // if(res.data.code == 500)
                //   this.$vs.notify({ text:res.message, color: "danger" });
              })
          } else {
            this.$vs.notify({
              text: `密码不一致`,
              color: 'danger',
            })
          }
        } else {
          console.log('验证不通过')
        }
      })
    },
    cancelFormSubmitData() {
      this.cardDialogVisible = false
      this.passwordFlage = true
      console.log('取消')
    },
  },
  directives: {
    'click-outside': {
      bind: function (el, binding) {
        const bubble = binding.modifiers.bubble
        const handler = (e) => {
          if (bubble || (!el.contains(e.target) && el !== e.target)) {
            binding.value(e)
          }
        }
        el.__vueClickOutside__ = handler
        document.addEventListener('click', handler)
      },

      unbind: function (el) {
        document.removeEventListener('click', el.__vueClickOutside__)
        el.__vueClickOutside__ = null
      },
    },
  },
  components: {
    VuePerfectScrollbar,
    draggable,
    navTab,
  },
}
</script>
<style>
.nav-tab-dropdown-menu {
  position: absolute;
  left: 469px !important;
  z-index: 52000;
  transform: translate(-35.5%);
}
.vs-dropdown&#45;&#45;menu&#45;&#45;after {
  position: absolute;
  /* left: 70px; */
}
.dropdown-custom .vs-dropdown&#45;&#45;menu&#45;&#45;after {
  background: rgba(var(&#45;&#45;vs-primary), 1) !important;
}
.logo_title {
  font-size: 18px;
  font-weight: 600;
  margin-left: 10px;
}
.view-container {
  margin-right: 20px;
}
.logo-image {
  width: 42px !important;
}
</style>-->

<template>
  <div class="relative">
    <div class="vx-navbar-wrapper">
      <vs-navbar
        class="vx-navbar navbar-custom"
        :color="navbarColor"
        :class="classObj"
      >
        <!-- SM - OPEN SIDEBAR BUTTON -->
        <!-- <feather-icon
          class="sm:inline-flex xl:hidden cursor-pointer mr-1"
          icon="MenuIcon"
          @click.stop="showSidebar"
        ></feather-icon> -->
        <img class='logo-image' src="../../assets/images/logo/logo.png" alt="" style="width:50px;height: 50px">
        <span class="logo_title">南通城市桥梁健康监测系统</span>
        <template v-if="breakpoint != 'md'">
          <!-- STARRED PAGES MORE -->
          <div
            class="vx-navbar__starred-pages--more-dropdown"
            v-if="starredPagesMore.length"
          >
            <vs-dropdown vs-custom-content vs-trigger-click>
              <feather-icon
                icon="DiscIcon"
                svgClasses="h-4 w-4"
                class="cursor-pointer p-2"
              ></feather-icon>
              <vs-dropdown-menu>
                <ul class="vx-navbar__starred-pages-more--list">
                  <draggable
                    v-model="starredPagesMore"
                    :group="{ name: 'pinList' }"
                    class="cursor-move"
                  >
                    <li
                      class="starred-page--more flex items-center cursor-pointer"
                      v-for="page in starredPagesMore"
                      :key="page.url"
                      @click="$router.push(page.url)"
                    >
                      <feather-icon
                        svgClasses="h-5 w-5"
                        class="ml-2 mr-1"
                        :icon="page.labelIcon"
                      ></feather-icon>
                      <span class="px-2 pt-2 pb-1">{{ page.label }}</span>
                    </li>
                  </draggable>
                </ul>
              </vs-dropdown-menu>
            </vs-dropdown>
          </div>

          <!-- <div class="bookmark-container">
            <feather-icon
            v-if="!this.$store.state.reduceButton"
              icon="DiscIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

            <feather-icon
            v-if="this.$store.state.reduceButton"
              icon="CircleIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="reducedSidebarHandler"
            />

          </div> -->

          <!-- navTab切换 -->
          <!-- <div class="bookmark-container">
            <feather-icon
              icon="LayersIcon"
              :svgClasses="[
                'stoke-current text-primary',
                { 'text-white': navbarColor != '#fff' }
              ]"
              class="cursor-pointer p-2"
              @click.stop="toggleCacheRoutehandler"
            />
          </div>
          <div
            v-if="isCacheRouteShow"
            class="navbar-nav-tab-wrapper w-full flex items-center px-4"
            style="height:26px;position:absolute;top:60%"
          >
            <nav-tab></nav-tab>
          </div> -->
        </template>
        <vs-spacer></vs-spacer>

        <!-- CART DROPDOWN -->
        <!-- <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon
            icon="ShoppingCartIcon"
            class="cursor-pointer ml-4 mr-6 mt-1"
            :badge="cartItems.length"
          ></feather-icon>
          <vs-dropdown-menu
            class="cart-dropdown vx-navbar-dropdown"
            :class="{ 'dropdown-custom': cartItems.length }"
          >
            <template v-if="cartItems.length">
              <div
                class="notification-header text-center p-5 bg-primary text-white"
              >
                <h3 class="text-white">
                  {{ cartItems.length }} Item<span v-show="cartItems.length > 1"
                    >s</span
                  >
                </h3>
                <p class="opacity-75">In Your Cart</p>
              </div>

              <VuePerfectScrollbar
                ref="mainSidebarPs"
                class="scroll-area--cart-items-dropdowm p-0 mb-10"
                :settings="settings"
              >
                <ul class="bordered-items">
                  <li
                    v-for="item in cartItems"
                    :key="item.objectID"
                    class="vx-row no-gutter cart-item cursor-pointer"
                  >
                    <div
                      class="vx-col w-1/5 item-img-container bg-white flex items-center justify-center"
                    >
                      <img
                        :src="item.image"
                        alt="item"
                        class="cart-dropdown-item-img p-4"
                      />
                    </div>

                    <div
                      class="vx-col w-4/5 pr-4 pl-2 py-4 flex flex-col justify-center"
                    >
                      <span
                        class="font-medium block cart-item-title truncate"
                        >{{ item.name }}</span
                      >
                      <small class="truncate mb-2">{{
                        item.description
                      }}</small>
                      <div class="flex items-center justify-between">
                        <span class="text-sm font-medium"
                          >{{ item.quantity }} <small>x</small> ${{
                            item.price
                          }}</span
                        >
                        <feather-icon
                          icon="XIcon"
                          svgClasses="h-4 w-4 cursor-pointer text-danger"
                          class="hover:text-danger"
                          @click.stop="removeItemFromCart(item)"
                        />
                      </div>
                    </div>
                  </li>
                </ul>
              </VuePerfectScrollbar>
              <div
                class=" checkout-footer fixed bottom-0 rounded-b-lg text-primary font-semibold w-full p-2 text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
                @click="$router.push('/apps/eCommerce/checkout')"
              >
                <span class="flex items-center justify-center">
                  <feather-icon
                    icon="ShoppingCartIcon"
                    svgClasses="h-4 w-4"
                  ></feather-icon>
                  <span class="ml-2">Checkout</span>
                </span>
              </div>
            </template>

            <template v-else>
              <p class="p-4">Your Cart Is Empty.</p>
            </template>
          </vs-dropdown-menu>
        </vs-dropdown> -->

        <!-- NOTIFICATIONS -->
        <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
          <feather-icon
            icon="BellIcon"
            class="cursor-pointer mt-1 sm:mr-6 mr-2"
            :badge="warningList.length"
          ></feather-icon>
          <vs-dropdown-menu
            class="notification-dropdown dropdown-custom vx-navbar-dropdown"
          >
            <div class="notification-top text-center p-5 bg-primary text-white">
              <h3 class="text-white">{{ warningList.length }} 条报警</h3>
            </div>

            <VuePerfectScrollbar
              ref="mainSidebarPs"
              class="scroll-area--nofications-dropdown p-0 mb-10"
              :settings="settings"
            >
              <ul class="bordered-items">
                <li
                  v-for="ntf in warningList"
                  :key="ntf.index"
                  class="flex justify-between px-4 py-4 notification cursor-pointer"
                >
                  <div class="flex items-start">
                    <feather-icon
                      :icon="ntf.icon"
                      :svgClasses="[
                        `text-${ntf.category}`,
                        'stroke-current mr-1 h-6 w-6',
                      ]"
                    ></feather-icon>
                    <div class="mx-2">
                      <span
                        class="font-medium block notification-title"
                        :class="[`text-${ntf.category}`]"
                      >{{ ntf.stationName }}</span
                      >
                      <small>{{ ntf.alarmDate }}</small>
                    </div>
                  </div>
                  <small class="mt-1 whitespace-no-wrap">{{
                    (ntf.code)
                    }}</small>
                </li>
              </ul>
            </VuePerfectScrollbar>
            <div @click="gotoWarning()"
                 class="checkout-footer fixed bottom-0 rounded-b-lg text-primary w-full p-2 font-semibold text-center border border-b-0 border-l-0 border-r-0 border-solid d-theme-border-grey-light cursor-pointer"
            >
              <span>查看所有</span>
            </div>
          </vs-dropdown-menu>
        </vs-dropdown>

        <!-- 视图切换 -->
        <div class="view-container">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ handleSelect }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(item, key) in viewContent"
                :key="key"
                :command="item.userViewId + ',' + item.viewName"
              >{{ item.viewName }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!-- USER META 用户信息 -->
        <div class="the-navbar__user-meta flex items-center">
          <div class="text-right leading-tight hidden sm:block">
            <p class="font-semibold">{{ user_displayName }}</p>
          </div>
          <vs-dropdown vs-custom-content vs-trigger-click class="cursor-pointer">
            <div class="con-img ml-3">
              <img
                v-if="iconId"
                key="onlineImg"
                :src="iconUrl"
                alt="user-img"
                width="40"
                height="40"
                class="rounded-full shadow-md cursor-pointer block"
              />
              <img
                v-else
                key="localImg"
                :src="
                          require(`@/assets/images/portrait/small/${activeUserImg}`)
                        "
                alt="user-img"
                width="40"
                height="40"
                class="rounded-full shadow-md cursor-pointer block"
              />
            </div>
            <vs-dropdown-menu class="vx-navbar-dropdown">
              <ul style="min-width: 9rem">
                <!-- <li
                  class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white"
                  @click="$router.push('/pages/profile')"
                >
                  <feather-icon icon="UserIcon" svgClasses="w-4 h-4" />
                  <span class="ml-2">个人信息</span>
                </li>
                <vs-divider class="m-1"></vs-divider> -->

                <li
                  class="flex py-2 px-4 cursor-pointer hover:bg-primary hover:text-white"
                  @click="logout"
                >
                  <feather-icon icon="LogOutIcon" svgClasses="w-4 h-4" />
                  <span class="ml-2">退出</span>
                </li>
              </ul>
            </vs-dropdown-menu>
          </vs-dropdown>
        </div>


      </vs-navbar>
    </div>
  </div>
</template>

<script>
  import VuePerfectScrollbar from "vue-perfect-scrollbar";
  import draggable from "vuedraggable";
  import navTab from "./navTab";
  import base from "@/api/base"; // 导入接口域名列表
  export default {
    name: "the-navbar",
    props: {
      navbarColor: {
        type: String,
        default: "#fff",
      },
      viewContent: {},
    },
    mounted() {
      let icon = JSON.parse(localStorage.getItem("userInfo")).icon;
      // console.log(icon.length, "8888888888888888888");

      // if (icon.length > 0) {
      //   this.iconId = icon[0].fileId;
      //   this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`;
      // }

      if (JSON.parse(icon).length > 0) {
        this.iconId = JSON.parse(icon)[0].fileId;
        this.iconUrl = `${base.UPLOADURL}/file/${this.iconId}`;
      }

      // 获取事件类型
      // this.getEventType();
    },
    created() {
      // this.clickOPtions();
      // this.getWarningType();
      // // 获取当天时间
      // let dateTime = new Date();
      // this.startTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "00:00:00";
      // this.endTime = dateTime.getFullYear() + "-" + (dateTime.getMonth()+1) + "-" + dateTime.getDate() + " " + "23:59:59";

      // console.log("滴滴滴弟弟第一地一地",this.startTime,this.endTime)
      if (localStorage.getItem("viewIndex"))
        this.handleSelect = this.viewContent[
          Number(localStorage.getItem("viewIndex"))
          ].viewName;
      else this.handleSelect = this.viewContent[0].viewName;

      // 获取十条告警列表
      /*this.getWarning();*/
    },
    data() {
      return {
        warningList:[],
        navbarSearchAndPinList: this.$store.state.navbarSearchAndPinList,
        searchQuery: "",
        showFullSearch: false,
        iconId:'',
        iconUrl: "",
        unreadNotifications: [
          {
            index: 0,
            title: "New Message",
            msg: "Are your going to meet me tonight?",
            icon: "MessageSquareIcon",
            time: "Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)",
            category: "primary",
          },
          {
            index: 1,
            title: "New Order Recieved",
            msg: "You got new order of goods.",
            icon: "PackageIcon",
            time: "Wed Jan 30 2019 07:45:23 GMT+0000 (GMT)",
            category: "success",
          },
          {
            index: 2,
            title: "Server Limit Reached!",
            msg: "Server have 99% CPU usage.",
            icon: "AlertOctagonIcon",
            time: "Thu Jan 31 2019 07:45:23 GMT+0000 (GMT)",
            category: "danger",
          },
        ],
        settings: {
          // perfectscrollbar settings
          maxScrollbarLength: 60,
          wheelSpeed: 0.6,
        },
        autoFocusSearch: false,
        showBookmarkPagesDropdown: false,
        isCacheRouteShow: false,
        // 选择的视图
        handleSelect: "",

      };
    },
    watch: {
      $route() {
        if (this.showBookmarkPagesDropdown)
          this.showBookmarkPagesDropdown = false;
      },
      "$store.state.cacheRoute": function (newVal) {
        if (newVal.length == 0) {
          this.toggleCacheRoutehandler();
        }
      },
      viewContent: {
        deep: true,
        immediate: true,
        handler: function () {
          console.log(this.viewContent, "222222222222222222222222222");
          // this.handleSelect = this.viewContent[1].name;
        },
      },
    },
    computed: {
      // HELPER
      sidebarWidth() {
        return this.$store.state.sidebarWidth;
      },
      breakpoint() {
        return this.$store.state.breakpoint;
      },

      // NAVBAR STYLE
      classObj() {
        if (this.sidebarWidth == "default") return "navbar-default";
        else if (this.sidebarWidth == "reduced") return "navbar-reduced";
        else if (this.sidebarWidth) return "navbar-full";
      },

      // I18N
      getCurrentLocaleData() {
        const locale = this.$i18n.locale;
        if (locale == "en") return { flag: "us", lang: "English" };
        else if (locale == "pt") return { flag: "br", lang: "Portuguese" };
        else if (locale == "fr") return { flag: "fr", lang: "French" };
        else if (locale == "de") return { flag: "de", lang: "German" };
      },

      // BOOKMARK & SEARCH
      data() {
        return this.$store.state.navbarSearchAndPinList;
      },
      starredPages() {
        return this.$store.state.starredPages;
      },
      starredPagesLimited: {
        get() {
          return this.starredPages.slice(0, 10);
        },
        set(list) {
          this.$store.dispatch("arrangeStarredPagesLimited", list);
        },
      },
      starredPagesMore: {
        get() {
          return this.starredPages.slice(10);
        },
        set(list) {
          this.$store.dispatch("arrangeStarredPagesMore", list);
        },
      },

      // CART DROPDOWN
      cartItems() {
        return this.$store.state.eCommerce.cartItems.slice().reverse();
      },

      // PROFILE
      user_displayName() {
        // if (localStorage.getItem("viewIndex"))
        //   this.handleSelect = this.viewContent[
        //     Number(localStorage.getItem("viewIndex"))
        //   ].viewName;
        // else this.handleSelect = this.viewContent[0].viewName;

        return JSON.parse(localStorage.getItem("userInfo")).realname;
      },
      activeUserImg() {
        return JSON.parse(localStorage.getItem('userInfo')).photoURL || this.$store.state.AppActiveUser.img;
        // return this.$store.state.AppActiveUser.img;
      },
    },
    methods: {
      gotoWarning(){
        this.$router.push("/healthMonitor/WarningList");
        // alert(123)
        // this.$router.push("/healthMonitor/WarningList");
      },
      handleCommand(command) {
        let data = command.split(",");
        this.handleSelect = data[1];
        console.log(data, "2222222222");
        this.$parent.getMenu(data[0]);
      },
      reducedSidebarHandler() {
        let _is_sidebar_collapse = this.$store.state.reduceButton;
        this.$store.commit("TOGGLE_REDUCE_BUTTON", !_is_sidebar_collapse);
      },
      toggleCacheRoutehandler() {
        if (this.$store.state.cacheRoute.length > 0) {
          this.isCacheRouteShow = !this.isCacheRouteShow;
          this.isCacheRouteShow
            ? (this.$el.querySelector(
            ".vs-navbar.vx-navbar"
            ).style.paddingBottom = "2.5rem")
            : (this.$el.querySelector(
            ".vs-navbar.vx-navbar"
            ).style.paddingBottom = "0.8rem");
        } else {
          this.$el.querySelector(".vs-navbar.vx-navbar").style.paddingBottom =
            "0.8rem";
          this.isCacheRouteShow = false;
        }
      },
      updateLocale(locale) {
        this.$i18n.locale = locale;
      },
      showSidebar() {
        this.$store.commit("TOGGLE_IS_SIDEBAR_ACTIVE", true);
      },
      selected(item) {
        this.$router.push(item.url);
        this.showFullSearch = false;
      },
      actionClicked(item) {
        // e.stopPropogation();
        this.$store.dispatch("updateStarredPage", {
          index: item.index,
          val: !item.highlightAction,
        });
      },
      showNavbarSearch() {
        this.showFullSearch = true;
      },
      showSearchbar() {
        this.showFullSearch = true;
      },
      elapsedTime(startTime) {
        let x = new Date(startTime);
        let now = new Date();
        var timeDiff = now - x;
        timeDiff /= 1000;

        var seconds = Math.round(timeDiff);
        timeDiff = Math.floor(timeDiff / 60);

        var minutes = Math.round(timeDiff % 60);
        timeDiff = Math.floor(timeDiff / 60);

        var hours = Math.round(timeDiff % 24);
        timeDiff = Math.floor(timeDiff / 24);

        var days = Math.round(timeDiff % 365);
        timeDiff = Math.floor(timeDiff / 365);

        var years = timeDiff;

        if (years > 0) {
          return years + (years > 1 ? " Years " : " Year ") + "ago";
        } else if (days > 0) {
          return days + (days > 1 ? " Days " : " Day ") + "ago";
        } else if (hours > 0) {
          return hours + (hours > 1 ? " Hrs " : " Hour ") + "ago";
        } else if (minutes > 0) {
          return minutes + (minutes > 1 ? " Mins " : " Min ") + "ago";
        } else if (seconds > 0) {
          return seconds + (seconds > 1 ? `${seconds} sec ago` : "just now");
        }

        return "Just Now";
      },
      logout() {
        // this.$router.push("/pages/login").catch(() => {});
        this.$api.login
          .logOut()
          .then((res) => {
            this.$api.login.logOutDate().then(res=>{
              console.log(res)
              if(res.data.success){

                this.$router.push("/pages/login");
                localStorage.removeItem("userInfo");
                localStorage.removeItem("token");
                localStorage.clear();
              }
            })
            // console.log("退出登陆", res);


          })
        // .catch(() => {
        //   this.$router.push("/pages/login");
        //   localStorage.removeItem("userInfo");
        //   localStorage.removeItem("token");
        //   localStorage.clear();
        // });
      },
      outside: function () {
        this.showBookmarkPagesDropdown = false;
      },

      // CART DROPDOWN
      removeItemFromCart(item) {
        this.$store.dispatch("eCommerce/toggleItemInCart", item);
      },

      // 获取权限下的病害列表
      /* getWarning(){
         this.$api.mearsuringPointSetting.getWarnignList().then(res => {
           console.log("10条告警列表", res.data.data);
           this.warningList = res.data.data;
         });
       }*/
    },
    directives: {
      "click-outside": {
        bind: function (el, binding) {
          const bubble = binding.modifiers.bubble;
          const handler = (e) => {
            if (bubble || (!el.contains(e.target) && el !== e.target)) {
              binding.value(e);
            }
          };
          el.__vueClickOutside__ = handler;
          document.addEventListener("click", handler);
        },

        unbind: function (el) {
          document.removeEventListener("click", el.__vueClickOutside__);
          el.__vueClickOutside__ = null;
        },
      },
    },
    components: {
      VuePerfectScrollbar,
      draggable,
      navTab,
    },
  };
</script>
<style>
  .nav-tab-dropdown-menu {
    position: absolute;
    left: 469px !important;
    z-index: 52000;
    transform: translate(-35.5%);
  }
  .vs-dropdown--menu--after {
    position: absolute;
    /* left: 70px; */
  }
  .dropdown-custom .vs-dropdown--menu--after {
    background: rgba(var(--vs-primary), 1) !important;
  }
  .logo_title {
    font-size: 18px;
    font-weight: 600;
    margin-left: 10px;
  }
  .view-container {
    margin-right: 20px;
  }
</style>
